import React from 'react';
import { Outlet } from 'react-router-dom';
// 移除未使用的导入
import Header, { type MenuItem } from './Header';
import Footer from './Footer';
import './Layout.css';

// 布局组件属性
interface LayoutProps {
  projectName?: string;
  menuItems?: MenuItem[];
}

const Layout: React.FC<LayoutProps> = ({
  projectName = 'common.projectName',
  menuItems = [
    { key: 'home', path: '/', label: 'navigation.home', protected: true },
    { key: 'editor', path: '/editor', label: 'navigation.editor', protected: true },
    { key: 'about', path: '/about', label: 'navigation.about', protected: false }
  ]
}) => {
  return (
    <div className="layout-container">
      {/* Header部分 - 使用独立组件 */}
      <Header projectName={projectName} menuItems={menuItems} />

      {/* 主要内容区域 */}
      <main className="layout-content">
        <div className="content-wrapper">
          <Outlet />
        </div>
      </main>

      {/* Footer部分 - 使用独立组件 */}
      <Footer projectName={projectName} />
    </div>
  );
};

export default Layout;